<%@ page import="org.xilin.*" %>

<g:setProvider library="jquery"/>

<style>
h3 { padding: .1em; margin: 0; }
#classes { float:left; width: 500px; margin-right: 2em; }

</style>

<g:formRemote name="adminAddBookToStudent" url="${[action:'adminAddBookToStudent']}" method="post" update="cluetip-inner" before="beforeSave(getBookIds())" onComplete="processResponse({closeOnSuccess:true})">
    <g:hiddenField name="view" value="adminAddClass" />
    <g:hiddenField name="id" value="${studentInstance?.id}" />
    <div class="dialog">

        <div id="classes">
            <h3 class="ui-widget-header">Books</h3>
            <div class="dropSource">

                <g:each in="${Book.categories}" status="i" var="category">
                    <%
                    def listByCategory = bookInstanceList?.findAll {it.category == category}
                    %>
                    <h4><a href="#">${category}</a></h4>
                    <div>
                        <ul class="ui-helper-reset">
                            <g:each in="${listByCategory}" var="book">
                                <li bookId='${book?.id}'>${book}</li>
                            </g:each>
                        </ul>
                    </div>
                </g:each>

            </div>
        </div>
        <br/>
        <h3>Drag and drop class here</h3>
        <div class="dropTarget">
            <h3 class="ui-widget-header">My books</h3>
            <div class="ui-widget-content">
                <ol class="dropHolder">
                    <g:if test="${studentInstance?.books.size() > 0}">
                        <g:each in="${studentInstance?.books}" var="book">
                            <li bookId="${book.id}"><p><span class="ui-icon ui-icon-trash" style="float:left; margin-right: 0.3em;"/>${book.name}</p></li>
                        </g:each>
                    </g:if>
                    <g:else>
                        <li class="placeholder" style="list-style-type: none">Drag class and drop it here</li>
                    </g:else>
                </ol>
            </div>
        </div>


    </div>
    <br/>
    <div class="buttons">
        <span class="button"><g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Save')}" /></span>
        <span class="button"><input type="reset" value="${message(code: 'default.button.clear.label', default: 'Reset')}" /></span>
    </div>
</g:formRemote>



<script>
function getBookIds() {
    var bookIdList = new Array();
    $('.dropHolder li').each(function() {
        bookIdList.push($(this).attr('bookId'));
    });
    $('#adminAddBookToStudent').append($('<input name="bookIdList" type="hidden" value="' + bookIdList.join(',') + '">'));
    return bookIdList;
}

$(function() {
    $('form h3').css('margin','0').css('padding','0.1em');
    $( ".dropSource" ).accordion({ autoHeight: false });
    $( ".dropSource li" ).draggable({
        appendTo: ".dropTarget ol",
        helper: "clone",
        start: function(event, ui) {
        }

    });
    $( ".dropTarget" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-hover",
        accept: ".dropSource li",
        drop: function( event, ui ) {
            if ($('.dropHolder ol li[bookId="' + ui.helper.attr('bookId') + '"]').size() > 0) {
                showMessage(ui.draggable.text() + ' is already selected');
            }
            else {
                $( this ).find( ".placeholder" ).remove();
                $( "<li bookId=" + ui.helper.attr('bookId') + "><p><span class='ui-icon ui-icon-trash' style='float:left; margin-right: 0.3em;'/>" + ui.draggable.text()+ '</p></li>' ).appendTo( $('.dropHolder') );
            }
        }
    });/*
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            // gets added unintentionally by droppable interacting with sortable
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
            $( this ).removeClass( "ui-state-default" );
        }
    });  */

    $('.dropHolder .ui-icon-trash').bind('click', function() {
        $(this).parent().parent().remove();  
    });
});
</script>

